<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        /**解决浏览器兼容性问题**/
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        /**/
        body {
            background: url(/img/galaxy.jpg) no-repeat center;
        }

        h1 {
            color: #fff;
            text-align: center;
            line-height: 80px;
        }

        .media {
            width: 534px;
            height: 400px;
            margin: 40px auto 0;
        }

        #register {
            width: 200px;
            height: 50px;
            background-color: #2196f3;
            margin: 60px auto 0;
            text-align: center;
            line-height: 50px;
            color: #fff;
            border-radius: 10px;
        }

        #canvas {
            display: none;
        }

        #shuru {
            width: 200px;
            height: 50px;
            background-color: #2196f3;
            margin: 20px auto 0;
        }
    </style>
</head>
<body>
<h1>链家人像采集</h1>
<div id="shuru">
    用户名：
    <input type="text" name="username" id="username"/>
</div>

<div class="media">
    <video id="video" width="700" height="500" src="" autoplay></video>
    <canvas id="canvas" width="700" height="1200"></canvas>

</div>
<button id="register">确定注册</button>
<script type="text/javascript" src="/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
    /**调用摄像头，获取媒体视频流**/
    var video = document.getElementById('video');
    //返回画布二维画图环境
    var userContext = canvas.getContext("2d");
    var getUserMedia =
        //浏览器兼容,表示在火狐、Google、IE等浏览器都可正常支持
        (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia)
    //getUserMedia.call(要调用的对象，约束条件，调用成功的函数，调用失败的函数)
    getUserMedia.call(navigator, {video: true, audio: false}, function (localMediaStream) {
        //获取摄像头捕捉的视频流
        video.srcObject = localMediaStream;
    }, function (e) {
        console.log("获取摄像头失败！！")
    });
    //点击按钮注册事件
    var btn = document.getElementById("register");

    btn.onclick = function () {
        var username = $("#username").val();
        if (username != null) {
            //点击按钮时拿到登陆者面部信息
            userContext.drawImage(video, 0, 0, 450, 300);
            var userImgSrc = document.getElementById("canvas").toDataURL("img/png");
            //拿到bash64格式的照片信息
            var faceBase = userImgSrc.split(",")[1];
            //ajax异步请求
            $.ajax({
                url: "/faceinfo/collectFaceInfo",
                type: "post",
                data: {
                    "faceBase": faceBase,
                    "username": username
                },
                success: function (result) {
                    if (result === 'success') {
                        alert("注册成功！！，点击确认跳转至登录页面");
                        window.location.href = "/faceinfo/toLogin";
                    } else {
                        alert(result);
                    }
                }
            })
        } else {
            alert("用户名不能为空");
        }
    }
</script>
</body>
</html>